.px2rem(@name, @px){
    @{name}:@px / 75 * 1rem;
}
.head{
    background: #fff;
    
}
.header{
    text-align: center;
    width: 100%;
    .px2rem(height,150);
    border-bottom: 1px solid #ccc;
    position:fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    h2{
        .px2rem(width,180);
        img{
            width: 70%;
        }
    }
    p{
        flex: 1;
        background:#fff url(../images/search.png) no-repeat 0.45rem center;
        background-size: 0.45rem;
        border-radius: 10px;
        i{
            .px2rem(height,80);
            .px2rem(font-size,32);
            .px2rem(line-height,80);
            color: #bfbfbf;
            font-style: normal;
        }
        img{
            .px2rem(width,48);
            float: right;
            .px2rem(padding-right,15);
            .px2rem(padding-top,20);
        }
    }
    .p{
        background: #f1f1f1 url(../images/search.png) no-repeat 0.45rem center;
        background-size: 0.45rem;
    }
    span{
        .px2rem(width,180);
        .px2rem(font-size,40);
        background: url(../images/down.png) no-repeat 1.9rem center;
        background-size: 0.4rem;
    }
}

.footer{
    position:fixed;
    bottom: 0;
    text-align: center;
    z-index: 99;
    width: 100%;
    .px2rem(height,164);
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    figure{
        .px2rem(font-size,60);
        color: #858585;
    }
    figcaption{
        .px2rem(font-size,24);
        color: #b4b4b4;
        .px2rem(line-height,45);
    }
    .first{
        color: red;
    }
}